<template>
    <div id="recommend">
        <div v-for="(pictures,index) in imgList" :key="index" @click="toID(pictures.catalogueName,pictures.categoryId)">
            <div >
                <head-title :title="pictures.catalogueName" ></head-title>
            </div>
            <div class="outer_frame" >
                <transverse-img :ID="pictures.categoryId">
                </transverse-img>
            </div>
        </div>
    </div>
</template>

<script>
import TransverseImg from "../../components/TransverseImg.vue"
import headTitle from "../../components/headTitle.vue"

import {List} from "../../api/Pictures"
export default {
    name: 'Recommend',
     components:{TransverseImg,headTitle},
    data() {
        return {
            imgList:[]
        };
    },

    mounted() {
        this.imgListD()
    },

    methods: {
       async  imgListD(){
          let {data}=await List({})
          if(data.code==200){
            this.imgList=data.data
          }
        },
        toID(name,ID){
        
            this.$router.push({
                path:"/description",
                query :{
                    descriptionName:name,
                    ID:ID
                }
            })
        }

    },
};
</script>

<style lang="scss" scoped>
#recommend{
    width: 100vw;
}
.outer_frame{
    height: 20vh;
    width: 100vw;
    padding: 0 2vw;
}
</style>